<template>
<div class="login-box">
  <nav-bar title="忘记密码" />
  <div class="content">
    <div class="form">
      <j-input type="text" v-model="mobileValue" label="手机号" max="11" class="bd-b" placeholder="请输入手机号"/>
      <j-input type="text" v-model="codeValue" label="验证码" class="bd-b" max="4" placeholder="请输入短信验证码">
        <div class="verification bd-l">
          <span class="code" :class="{disable: disabled}" @click="getCode">{{count?count + 's': codeText}}</span>
        </div>
      </j-input>
      <j-input type="password" v-model="passwordValue" class="bd-b"  label="密码" placeholder="请输入新密码"/>
      <j-input type="password" v-model="ConfirmPpassword" class="bd-b" label="确认密码" placeholder="确认新密码"/>
     </div>
    <j-botton type="danger" class="loginBtn" style="margin-top:2.78rem;" :loading="isLoading" loadingText='修改中' @click.native="editPassWord">下一步</j-botton>
  </div>
</div>
</template>
<script>
export default {
  name: 'goForgotPassword',
  data() {
    return {
      mobileValue: '',
      passwordValue: '',
      ConfirmPpassword: '',
      isLoading: false,
      codeValue: '',
      colde: '',
      disabled: false,
      codeText: '获取验证码',
      count: '',
      timer: null
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    getSMS() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.disabled = true;
        this.timer = setInterval(() => {
          this.count && (this.codeText = '重新获取');
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.disable = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取验证码
    getCode() {
      var isPhone = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobileValue));
      if (isPhone) {
        this.$toast('请输入正确的手机号!');
        return;
      }
      if (this.disabled) {
        return;
      }
      // this.getSMS();
      this.$API.user.sendMsg({
        mobile: this.mobileValue + '',
        type: 5
      }).then(res => {
        if (res.code === -1) {
          this.$toast(res.message);
        } else {
          this.getSMS();
          this.$toast('验证码发送成功,请注意查收');
        }
      });
    },
    editPassWord() {
      var _account = this.mobileValue + '';
      var _password = this.passwordValue + '';
      var isPhone = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobileValue));
      if (isPhone) {
        this.$toast('请输入正确的手机号!');
        return;
      }
      if (!_account) {
        this.$toast('手机号不能为空');
        return;
      }
      if (!this.codeValue) {
        this.$toast('验证码不能为空');
        return;
      }
      if (!_password) {
        this.$toast('密码不能为空');
        return;
      }
      if (!this.ConfirmPpassword) {
        this.$toast('确认密码不能为空');
        return;
      }
      if (this.passwordValue !== this.ConfirmPpassword) {
        this.$toast('两次密码输入的不一致!');
        return;
      }
      var options = {
        mobile: this.mobileValue,
        code: this.codeValue,
        password: this.passwordValue,
        confPass: this.passwordValue,
        type: 1
      };
      this.isLoading = true;
      this.$API.user.updatePass(options).then((res) => {
        if (!res.code) {
          this.$router.go(-1);
        }
        this.isLoading = false;
      });
    }
  }
};
</script>
